import react from "react";
import "./E1.css";
import {Button, Row, Col, Input, Drawer, List} from 'antd';


class Example1 extends react.PureComponent {
    //生命周期
    constructor() {
        super();
        console.log(" constructor execute!");
        this.state = {
            inputStr: "",
            drawerVisible: false,
            historyData: [],
        }

    }

    componentDidMount() {
        console.log(" componentDidMount execute!");
    }

    handleResultArraySum = (arr) => {
        let i = 0;
        let sum = 0;
        for (i = 0; i < arr.length; i++) {
            sum = sum + parseFloat(arr[i]);
        }
        return sum;
    }

    handleInput = (e) => {
        console.log(e.target.innerText);
        let newInput = e.target.innerText;
        let currentInput = "";
        switch (newInput) {
            case "+":
            case "-":
            case "*":
            case "/":
                currentInput = this.state.inputStr + " " + newInput + " ";
                break;
            default:
                if (!isNaN(newInput)) {
                    currentInput = this.state.inputStr + newInput;
                }
                break;
        }
        this.setState({inputStr: currentInput})
    }

    handleCalculate = (operString) => {
        let arr1 = operString.split(" ");
        console.log(arr1);
        let i = 0;
        let resultArray = [];
        let sum = 0;
        for (i = 0; i < arr1.length; i++) {
            let currentItem = arr1[i];
            let res = 0;
            let fristNum = 0;
            let secondNum = 0;
            switch (currentItem) {
                case "-":
                    res = 0 - arr1[i + 1];
                    resultArray.push(res);
                    i = i + 1;
                    break;
                case "*":
                    fristNum = resultArray.pop();
                    secondNum = arr1[i + 1];
                    i = i + 1;
                    res = parseFloat(fristNum) * parseFloat(secondNum);
                    resultArray.push(res);
                    break;
                case "/":
                    fristNum = resultArray.pop();
                    secondNum = arr1[i + 1];
                    i = i + 1;
                    res = parseFloat(fristNum) / parseFloat(secondNum);
                    resultArray.push(res);
                    break;
                case "+":
                    break;

                default:
                    if (!isNaN(currentItem)) {
                        resultArray.push(currentItem);
                    }
                    break;

            }
        }
        sum = this.handleResultArraySum(resultArray);
        return sum;
    }

    handleEqution = () => {
        let result = this.handleCalculate(this.state.inputStr);
        let currentStr = this.state.inputStr + " = " + result;
        this.setState({inputStr: currentStr});
        let arr = [];
        arr.push(currentStr);
        let oldData = [];
        oldData = JSON.parse(localStorage.getItem("result"));
        arr = [...arr, ...oldData];
        localStorage.setItem("result", JSON.stringify(arr));
    }

    handleAC = () => {
        console.log("click handleAC");
        // let str = "1 + 2 * 3 - 4 / 2 =";
        let str = "2 * 2 + 2 + 4 / 2 =";
        this.handleCalculate(str);
    }

    handleHistory = () => {
        let data = JSON.parse(localStorage.getItem("result"));
        this.setState({
            drawerVisible: true,
            historyData: data,
        });
    }

    onClose = () => {
        this.setState({drawerVisible: false});
    }

    render() {
        console.log(" render execute!");
        return (
            <>
                <div id="div_cal_main">
                    <Row>
                        <Input id="div_cal_input" value={this.state.inputStr} placeholder="Basic usage" disabled/>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleAC}>AC</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button">%</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button">M</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_oper_button" onClick={this.handleHistory}>History</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>1</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>2</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>3</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_oper_button" onClick={this.handleInput}>+</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>4</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>5</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>6</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_oper_button" onClick={this.handleInput}>*</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>7</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>8</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>9</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_oper_button" onClick={this.handleInput}>-</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>0</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_number_button" onClick={this.handleInput}>/</Button>
                        </Col>
                        <Col span={6}>
                            <Button className="div_cal_oper_button" onClick={this.handleEqution}>=</Button>
                        </Col>
                    </Row>
                    <Drawer
                        title="Basic Drawer"
                        placement="right"
                        closable={true}
                        onClose={this.onClose}
                        visible={this.state.drawerVisible}
                    >
                        <List
                            size="small"
                            header={<div>Header</div>}
                            footer={<div>Footer</div>}
                            bordered
                            dataSource={this.state.historyData}
                            renderItem={item => <List.Item>{item}</List.Item>}
                        />
                    </Drawer>
                </div>
            </>
        );
    }
}

export default Example1;
